<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的属性</title>
		<script>
			function getFirstLi(){
				let d=document.getElementById("cartList");
				//找到ul
				//let ul=d.firstChild;
				let ul=d.firstElementChild;
				alert(ul.nodeName);//#text
				//ul.innerHTML="";
				ul.firstElementChild.innerHTML="商品编号";
			}
			function getNextP(){
				let d=document.getElementById("cartList");
				console.log(d.nextSibling.nodeName);
				console.log(d.nextSibling.nodeType);
				console.log(d.nextSibling.nodeValue);
				d.nextElementSibling.innerHTML="总价，98元";
				d.previousElementSibling.innerHTML="最新热卖图书";
			}
		</script>
	</head>
	<body>
		<div>
			<button type="button" onclick="getFirstLi()">获得第一个li</button>
			<button type="button" onclick="getNextP()">获得div后面的p</button>
		</div>
		<div class="logo">
		   <span>关闭</span>
		</div>
		<div class="cartList" id="cartList">
		    <ul>
		        <li>商品图片</li>
		        <li>商品信息</li>
		        <li>单价</li>
		        <li>数量</li>
		        <li>总价</li>
		        <li>操作</li>
		    </ul>
		</div>
		 
		<p></p>
	</body>
</html>